<script setup lang="ts">
import {useRoute} from "vue-router";
import {computed, ref} from "vue";
import {router} from "@/router";

const route = useRoute();
const id = ref(route.params.id);


const href = ref('');

href.value = router.resolve({name: '动态路由', params: {id: ['12', '13']}}).href;

const first = ref('');
const second = ref('');

let content = computed(() => {
  if (first.value != '' && second.value != '') {
    return router.resolve({
      name: '动态路由',
      params: {id: [first.value, second.value]}
    }).href;
  }
  return '#';

});

</script>

<template>
  <el-card header="路由语法" class="mb-4">
    <pre v-highlight><code class="javascript">const routes = [
  // /:orderId -> 仅匹配数字
  { path: '/:orderId(\\d+)' },
  // /:productName -> 匹配其他任何内容
  { path: '/:productName' },
]</code></pre>

    <p>当定义像 <code>:userId</code> 这样的参数时，我们内部使用以下的正则 <code>([^/]+)</code> (至少一个不是斜杠
      <code>/</code> 的字符)来从 URL 中提取参数</p>

    <p>确保转义反斜杠( <code>\</code> )，就像我们对 <code>\d</code> (变成 <code>\\d</code> )所做的那样，在 JavaScript
      中实际传递字符串中的反斜杠字符。</p>

  </el-card>

  <el-card header="可重复的参数" class="mb-4">
    如果你需要匹配具有多个部分的路由，如 <code>/first/second/third</code>，你应该用 <code>*</code>（0 个或多个）和
    <code>+</code>（1 个或多个）将参数标记为可重复
    <pre v-highlight><code class="javascript">const routes = [
  // chapters 匹配 /one, /one/two, /one/two/three, 等
  // /:chapters+  ===> (/:chapters)+ ===> (/[^/+])+
  { path: '/:chapters+' },
  // chapters 匹配 /, /one, /one/two, /one/two/three, 等
  { path: '/:chapters*' },
]</code></pre>
    <p>这些也可以通过在<b>右括号</b>后添加它们与自定义正则结合使用：</p>
    <pre v-highlight><code class="javascript">const routes = [
  // 仅匹配数字
  // 匹配 /1, /1/2, 等
  { path: '/:chapters(\\d+)+' },
  // 匹配 /, /1, /1/2, 等
  { path: '/:chapters(\\d+)*' },
]</code></pre>
  </el-card>

  <el-card header="路由生成URL" class="mb-4">
    <div class="flex gap-4">
      <div>
        <p>第1个参数</p>
        <el-input v-model="first"/>
      </div>
      <div>
        <p>第2个参数</p>
        <el-input v-model="second"/>
      </div>
    </div>
    <pre v-highlight><code class="javascript">//路由定义：{path: 'dynamic/:id(.*)+',name: '动态路由'}
router.resolve({
  name: '动态路由',
  params: {id: [first.value, second.value]}
}).href</code></pre>
    <p>
      <el-link :href="content" type="success">跳转： {{ content }}</el-link>
    </p>
  </el-card>

  <el-card header="可选参数">
    <p>你也可以通过使用 <code>?</code> 修饰符(0 个或 1 个)将一个参数标记为可选：</p>
    <pre v-highlight><code class="javaScript">const routes = [
  // 匹配 /users 和 /users/posva
  { path: '/users/:userId?' },
  // 匹配 /users 和 /users/42
  { path: '/users/:userId(\\d+)?' },
]</code></pre>
  </el-card>

</template>

<style scoped>

</style>
